<template>

    <!-- <MyProduct title="好吃的北京烤鸭" price="400" intro="开业活动一律4折起"></MyProduct>
    <MyProduct title="kfc三层牛肉宝" price="36" intro="老板娘不在家 全场1折起"></MyProduct>
    <MyProduct title="好可爱的可爱多" price="4" :intro="str"></MyProduct> -->
    <MyProduct v-for="(obj,index) in list" 
    :key="obj.id"
     v-bind:title="obj.title" 
     :price="obj.price" 
     :intro="obj.intro"
     :index ="index" 
     @subprice="fn"></MyProduct>
     <hr>
     <!-- <MyProduct 
     v-for=" (obj,index) in list" :key="obj.id" :item="obj" :index="obj.id" @subprice="fn"></MyProduct> -->


</template>
<script>
import MyProduct from './MyProduct.vue'
export default {
    data() {
        return {
            str: '开业活动免费吃',
            list: [
                {   
                    id: 101,
                    title: '好吃的北京烤鸭',
                    price: 400,
                    intro: '开业活动一律4折起'
                },
                {
                    id: 102,
                    title: 'kfc三层牛肉宝',
                    price: 36,
                    intro: '老板娘不在家 全场1折起'
                },
                {
                    id: 103,
                    title: '好可爱的可爱多',
                    price: 4,
                    intro: '开业活动免费吃'
                }

            ]
        }
    },
    components: {
        MyProduct
    },
    methods: {
        fn(index, price) {
            console.log(index, price);
           this.list[index].price >= 1 && (this.list[index].price = this.list[index].price - price).toFixed(2)
        }
    }
}
</script>
<style>


</style>